<template>
  <div class="common-layout">
    <el-container>
      <!--   公共 header start   -->
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
        >
          <el-menu-item index="0">LOGO</el-menu-item>
          <el-menu-item index="1">Processing Center</el-menu-item>
          <el-menu-item index="2">Processing Center</el-menu-item>
          <div class="flex-grow" />
          <div style="display: flex; align-items: center">
            <el-popover
              :width="300"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
              trigger="click"
            >
              <template #reference>
                <el-avatar
                  src="https://avatars.githubusercontent.com/u/72015883?v=4"
                />
              </template>
              <template #default>
                <div
                  class="demo-rich-conent"
                  style="
                    display: flex;
                    gap: 16px;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <el-avatar
                    :size="60"
                    src="https://avatars.githubusercontent.com/u/72015883?v=4"
                    style="margin-bottom: 8px"
                  />
                  <div>
                    <p
                      class="demo-rich-content__name"
                      style="margin: 0; font-weight: 500; text-align: center"
                    >
                      所属部门
                    </p>
                    <p
                      class="demo-rich-content__mention"
                      style="
                        margin: 0;
                        font-size: 14px;
                        color: var(--el-color-info);
                        text-align: center;
                      "
                    >
                      所属角色
                    </p>
                  </div>

                  <el-row class="mb-4">
                    <el-button>用户面板</el-button>
                    <el-button type="danger">退出登录</el-button>
                  </el-row>
                </div>
              </template>
            </el-popover>
          </div>
        </el-menu>
      </el-header>
      <!--   公共 header end   -->
      <!--   公共主体 start   -->
      <el-main style="padding-left: 0; padding-right: 0">
        <el-container class="layout-container">
          <!--   公共主体导航 start       -->
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="0">
              <el-icon
                v-model="isCollapse"
                @open="handleCollapseOpen"
                @close="handleCollapseClose"
              >
                <Expand />
                <!--                <Fold />-->
              </el-icon>
              <template #title>打开菜单</template>
            </el-menu-item>

            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group>
                <template #title><span>Group One</span></template>
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title><span>item four</span></template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <template #title>Navigator Two</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon><document /></el-icon>
              <template #title>Navigator Three</template>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><setting /></el-icon>
              <template #title>Navigator Four</template>
            </el-menu-item>
          </el-menu>

          <!--   公共主体导航 end       -->
          <!--     内容替换部分 start     -->
          <el-container style="padding: 15px">
            <el-main>
              <!--      面包屑        -->
              <el-card class="box-card">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/' }"
                    >homepage</el-breadcrumb-item
                  >
                  <el-breadcrumb-item
                    ><a href="/">promotion management</a></el-breadcrumb-item
                  >
                  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                </el-breadcrumb>
              </el-card>
              <!--        列表功能      -->
              <el-card class="box-card">
                <el-row class="mb-4">
                  <el-button>全选</el-button>
                  <el-button type="primary">新增</el-button>
                  <el-button type="success">导出</el-button>
                  <el-button type="warning">转交</el-button>
                  <el-button type="info">打印</el-button>
                  <el-button type="danger">删除</el-button>
                  <el-badge :value="3" class="item" style="margin-left: 10px;">
                    <el-button>今日跟进</el-button>
                  </el-badge>
                </el-row>
              </el-card>
              <!--       搜索       -->
              <el-card class="box-card">
                <el-form :label-position="labelPosition">
                  <el-row :gutter="15">
                    <el-col :span="4">
                      <el-form-item label="Name">
                        <el-input />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="Name">
                        <el-select
                          v-model="option"
                          placeholder="Select"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="Date">
                        <el-date-picker
                          v-model="date"
                          type="date"
                          placeholder="选择日期"
                          :size="size"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-divider style="margin: 0" />
                  <el-row class="mb-4" style="margin-top: 15px">
                    <el-button type="primary">搜索</el-button>
                    <el-button>重置</el-button>
                  </el-row>
                </el-form>
              </el-card>
              <!--      列表        -->
              <el-card class="box-card">
                <el-scrollbar>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column
                      fixed
                      prop="date"
                      label="Date"
                      width="150"
                    />
                    <el-table-column prop="name" label="Name" width="120" />
                    <el-table-column prop="state" label="State" width="120" />
                    <el-table-column prop="city" label="City" width="120" />
                    <el-table-column
                      prop="address"
                      label="Address"
                      width="600"
                    />
                    <el-table-column prop="zip" label="Zip" width="120" />
                    <el-table-column
                      fixed="right"
                      label="Operations"
                      width="120"
                    >
                      <template #default>
                        <el-button
                          link
                          type="primary"
                          size="small"
                          @click="handleClick"
                          >Detail</el-button
                        >
                        <el-button link type="primary" size="small"
                          >Edit</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-scrollbar>
              </el-card>
              <!--              //分页-->
              <el-card>
                <div class="pagination-block">
                  <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </div>
              </el-card>
            </el-main>
          </el-container>
          <!--     内容替换部分 end     -->
        </el-container>
      </el-main>
      <!--   公共主体 end   -->
      <el-footer style="text-align: center; line-height: 60px">
        @copyright 蓝狐（西安）科技信息有限公司
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  Document,
  Menu as IconMenu,
  Message,
  Setting,
} from "@element-plus/icons-vue";

//导航
const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

//控制菜单显示隐藏
const isCollapse = ref(false);
const handleCollapseOpen = () => {
  isCollapse.value = false;
};
const handleCollapseClose = () => {
  isCollapse.value = true;
};

//搜索
const labelPosition = ref("top");
//日期插件
const date = ref("");
//下卡选框值
const option = ref("");
//下拉选框
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
//分页
const currentPage = ref(4);
const pageSize = ref(100);

//测试数据
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
];
</script>

<style scoped>
/*header样式  start */

.el-header {
  background-color: #fff;
  border-bottom: solid 1px var(--el-menu-border-color);
}
.el-header > .el-menu {
  border-bottom: none;
}
.flex-grow {
  flex-grow: 1;
}
/*header样式  end */

/*主体内容样式 start*/
.common-layout > .el-container {
  height: 100vh;
}

.layout-container {
  height: 100%;
}
.box-card {
  margin-bottom: 15px;
}
.el-scrollbar,
.scrollbar__wrap {
  height: auto !important;
}
/*主体内容样式 end*/

/*侧边导航  start*/

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
/*侧边导航  end*/
/*内容容器 start*/
.el-main {
  padding: 0;
}
/*内容容器end*/
/*脚部样式start*/
.el-footer {
  background-color: #ffffff;
  border-top: solid 1px var(--el-menu-border-color);
}
/*脚部样式end*/
</style>
